.featureDetail{
    position: absolute;
    top: 117px;
    left: 12px;
    z-index: 500;
    @extend .center;
    justify-content: flex-start;
    margin-top: 4px;
    flex-direction: column;
    background: rgba(0,0,0,0.72);
    // width: 360px;
    border-radius: 2px;
    @media screen and (min-width: 1200px) {
        width: 360px;
    }
    @media screen and (max-width: 1200px) {
        width: 300px;
    }
    :global{
        .ant-input-affix-wrapper{
            padding: 6px 11px;
            background: rgba(0,0,0,0.72);
            border: none;
            border: 1px solid #5E706F;
            border-right: none;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }
        .ant-form{
            padding-right: 10px;
        }
        .ant-form-item-label > label{
            color: #fff;
            display: block;
            // font-size:12px;
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
            line-height: 32px;
        }
        .ant-input-affix-wrapper-focused{
            box-shadow: none;
        }
        .ant-input{
            background: rgba(0,0,0,0);
            color: #fff;
        }
        .ant-select-dropdown{
            background-color:rgba(151, 169, 160, 0.39);
            color: #fff;
        }
        .ant-form-item-control{
            display: flex;
            justify-content: flex-end;
        }
        .ant-form-item-has-error .ant-input, .ant-form-item-has-error .ant-input-affix-wrapper, .ant-form-item-has-error .ant-input:hover, .ant-form-item-has-error .ant-input-affix-wrapper:hover{
            background:rgba(151, 169, 160, 0.39);
        }
        .ant-btn-primary{
            background:  rgba(0, 247, 148, 0.55);
            border: none;
        }
        .ant-btn-primary:hover, .ant-btn-primary:focus{
            background:  rgba(0, 247, 148, 0.55);
        }
        .FeatureDetail_featureDetail__T-n-b .ant-form-item-label > label{
            
        }
        
    }
    .header{
        @extend .center;
        width: 100%;
        justify-content: space-between;
        color: #fff;
        padding: 5px 12px;
        border-bottom: 1px solid #C5FFFB;
        i{
            cursor: pointer;
        }
        .iconBox{
            padding-right: 10px;
        }
    }
}
.featureDetail{
    left: auto;
    right: 12px;
    .content{
        @extend .center;
        width: 100%;
        min-height: 220px;
        flex-direction: column;
        align-items: flex-start;
        .featureContent{
            width: 100%;
            min-height: 220px;
            .btns{
                @extend .center;
                padding: 12px 12px 0px 12px;
                width: 100%;
                justify-content: flex-start;
                span{
                    display: inline-block;
                    width: 80px;
                    height: 32px;
                    background: rgba(0, 247, 148, 0.55);
                    border-radius: 2px;
                    color: #fff;
                    line-height: 32px;
                    text-align: center;
                    cursor: pointer;
                    // &:first-child{
                    margin-right: 8px;
                    // }
                }
            }
            .featureTitle{
                @extend .center;
                width: 100%;
                justify-content: flex-start;
                padding: 8px 12px;
                color: #fff;
            }
            .crossline{
                width: 100%;
                height: 1px;
                background: rgba(197, 255, 251, 0.88);
            }
            .featureInfo{
                width: 100%;
                padding: 12px 2px 12px 12px;
                .featureViewBox{
                    @extend .center;
                    flex-direction: column;
                    margin-right: 10px;
                    border: 1px solid #ccc;
                    .item{
                        width: 100%;
                        @extend .center;
                        justify-content: flex-start;
                        color: #fff;
                        span{
                            flex: 1;
                            padding: 5px;
                            display: inline-block;
                            height: 100%;
                            word-break: break-all;
                            &:first-child{
                                text-align: left;
                                color: #ccc;
                            }
                            &:last-child{
                                padding-left: 6px;
                                text-align: left;
                            }

                        }
                        .itemLeft{
                            border-right: 1px solid #ccc;
                        }
                        .itemRight{
                            border-left: 1px solid #ccc;
                        }
                    }
                    
                    &:not(:last-child){
                        border-bottom: none;
                    }
                }
                .viewImageBox{
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    color: #fff;
                    border: 1px solid #fff;
                    margin-right: 10px;
                    padding: 5px;
                    .imageTitle{
                        width: 36px;
                        display: inline-block;
                    }
                    .images{
                        flex: 1;
                        .image{
                            width: 94px;
                            height: 94px;
                            padding: 5px;
                        }
                    }
                }
            }
            .back{
                margin-right: 15px;
            }
            .imageBox{
                @extend .center;
                margin-top: 12px;
                .imageContent{
                    @extend .center;
                    width: 336px;
                    flex-direction: column;
                    margin-left: 12px;
                    .imageItem{
                        width: 100%;
                        img{
                            width: 336px;
                            border-radius: 2px;
                            &:not(last-child){
                                margin-bottom: 8px;
                            }
                        }
                        .closeIcon{
                            position: absolute;
                            color: #fff;
                            right: 12px;
                            background: green;
                            border-radius: 50%;
                            width: 20px;
                            height: 20px;
                            text-align: center;
                            line-height: 20px;
                            cursor: pointer;
                            i{
                                font-size: 12px;
                            }
                        }
                    } 
                }
                
            }
        }
    }
}

.delBox{
    position: absolute;
    top: 117px;
    right: 382px;
    z-index: 500;
    @extend .center;
    justify-content: flex-start;
    margin-top: 4px;
    flex-direction: column;
    background: rgba(0,0,0,0.72);
    width: 360px;
    border-radius: 2px;
    color: #fff;
    .header{
        @extend .center;
        width: 100%;
        justify-content: flex-end;
        padding: 12px 12px 0px 0px;
        i{
            cursor: pointer
        }
    }
    .content{
        @extend .center;
        flex-direction: column;
        padding: 0px 12px 12px 0px;
        i{
            color: #FF0000;
            font-size: 34px;
        }
    }
    .delBtn{
        @extend .center;
        width: 80px;
        height: 32px;
        background-color: #FF0000;
        margin: 12px;
        cursor: pointer;
        border-radius: 2px;
    }
}

